<template>
  <el-row justify="center">
    <h1>销售商品</h1>
  </el-row>
  <el-row>
    <el-col
        v-for=" product in  productList"
        :key=product
        :span="8"
    >
        <el-card :body-style="{ padding: '0px' }">
          <img
              :src=product.path
              class="image"
          />
          <el-form :inline="true"  class="demo-form-inline" >
            <el-form-item label="商品名:">
          {{product.name}}
            </el-form-item>
            <el-form-item label="价格:">
              {{product.price}}
            </el-form-item>
          </el-form>
          <div style="padding: 14px">

            <div class="bottom">
              <el-button type="success" class="button" @click="add(product)">加入购物车</el-button>
            </div>
          </div>
        </el-card>




    </el-col>
  </el-row>
</template>
<script>
import axios from "axios";
import { ElMessage } from 'element-plus'
export default {
  data() {
    return {
      productList:[
          {name:"鸡翅",price:888,num:1,path:"http://hzx.ezy2.top/2.jpg"}
        ,{name:"可乐",price:8,num:1,path:"http://hzx.ezy2.top/1.jpg"}
        ,{name:"薯条",price:91,num:1,path:"http://hzx.ezy2.top/3.jpg"}],
    }
  },methods:{
    add(product){
      axios.get("/project/shop/add",{params:product}).then(n=>{

        if(n.data=="ok"){
          ElMessage({
            message: '购买成功',
            type: 'success',
          })

          this.$router.push("/carInfo")

        }

      })
    }

  }
}
</script>

<style scoped>
.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}
.demo-form-inline{
  padding-left: 80px;
}
.image {
 width: 300px;
  height: 300px;
  display: block;
  margin: auto;
}
</style>